/**
 * 表单内Form表单下FormItem格式
 */
import React, {Component} from 'react';
import {connect} from 'dva';
import {Form, Row, Col, Select, Input, Cascader, DatePicker, TimePicker, Radio, Button, TreeSelect} from 'antd';
import MyIcon from '../common/MyIcon';
import myStyles from './recordFormItem.less';
const FormItem = Form.Item;
const Option = Select.Option;
const TextArea = Input.TextArea;

class Text extends Component {
  render() {
    const value = this.props.value;
    return <div className={myStyles.myText}>{value}</div>
  }
}
class TextLabel extends Component {
  render() {
    const value = this.props.value;
    const length = value.length;
    return <div className={myStyles.myText}>
      {
        value.map((item, index) => (
          <div key={index}
               className={myStyles.myTextLabel}
               onClick={this.props.onClick.bind(this,item.applianceId)}>
            {item.applianceNo||'' + item.applianceName||'' + item.applianceModel||''+(length===index+1||',')}
          </div>
        ))
      }
    </div>
  }
}

const RecordFormItem = ({item, getFieldDecorator, offset, noOffset, disabled,readOnly}) => {
  if (disabled)
    item.readonly = disabled;
  // const formItemLayout = {
  //   labelCol: {span: 4},
  //   wrapperCol: {span: 20},
  // };
  return (
    <div >
      {item.type === 'input' &&
      <FormItem
        label={item.label}
        className={myStyles.myFormItem}
      >
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <Input
              className={myStyles.myInput}
              placeholder={item.placeholder || ''}
              readOnly={readOnly}
              style={item.style}
              addonBefore={item.addonBefore || ''}
              addonAfter={item.addonAfter || ''}
              maxLength={item.maxLength}
            />
          )
        }
      </FormItem>}
      {item.type === 'textArea' &&
      <FormItem label={item.label} colon={false} style={{minHeight: 90}}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <TextArea
              disabled={item.readonly}
              readOnly={readOnly}
              autosize={{minRows: 2, maxRows: 4}}
              maxLength={item.maxLength}
              placeholder={item.placeholder}
            />
          )}
      </FormItem>}
      {item.type === 'text' &&
      <FormItem label={item.label}
                className={myStyles.myFormItem}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <Text/>
          )}
      </FormItem>}
      {item.type === 'textLabel' &&
      <FormItem label={item.label}
                className={myStyles.myFormItem}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <TextLabel onClick={item.onClick}/>
          )}
      </FormItem>}
    </div>
  )
};
function mapStateToProps(state) {
  return {};
}
export default connect(mapStateToProps)(RecordFormItem);
